<template>
  <div class="page">
    <s-header name="申请记录" :back="'/government/home'"></s-header>
    <van-tabs
      v-model:active="active"
      color="#FED045"
      background="linear-gradient(90deg, #206dec, #359eff)"
      title-active-color="#fff"
      title-inactive-color="#dfe9ff"
      :before-change="beforeChange"
      class="tabs-box"
    >
      <van-tab v-for="(item, index) in tabList" :key="index" :name="item.applyType" :title="item.name">
        <div class="content">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              :finished-text="dataList.length ? '没有更多了' : '暂无记录'"
              @load="onLoad"
              @offset="10"
            >
              <template v-if="dataList.length">
                <record-card v-for="(record, index) in dataList" :applyType="active" :key="index" ref="recordCard" :value="record" />
              </template>
              <van-image v-else :src="listNull" class="empty" width="120" alt="搜索" />
            </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from 'vue'
import sHeader from '@/components/SimpleHeader'
import RecordCard from './components/RecordCard'
import { useRoute, useRouter } from 'vue-router'
import { getBuildApplyNotice, getStartApplyNotice, getFinishApplyNotice } from '@/service/home'
import listNull from '@/assets/Images/list_null.png'
export default {
  name: 'ApplyRecord',
  components: {
    sHeader,
    RecordCard,
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      listNull: listNull,
      active: 1,
      loading: false,
      listQuery: { pageNo: 1, pageSize: 5 },
      totalPage: 0,
      refreshing: false,
      finished: false,
      tabList: [
        // applyType: 1建房申请  2开工申请  3竣工申请
        { id: 1, name: '建房申请记录', applyType: 1 },
        { id: 2, name: '开工申请记录', applyType: 2 },
        { id: 3, name: '竣工申请记录', applyType: 3 },
      ],
      dataList: [],
    })

    state.active = Number(route.query.applyType) || 1

    onMounted(() => {})

    // 切换标签页
    const beforeChange = (index) => {
      state.active = index
      onRefresh()
    }

    //获取列表
    const getDataList = async () => {
      let res = {}
      let list = []
      let totalPage = 0
      switch (state.active) {
        case 2:
          res = await getStartApplyNotice(state.listQuery)
          list = res.body.page.records
          totalPage = res.body.page.total
          break
        case 3:
          res = await getFinishApplyNotice(state.listQuery)
          list = res.data.records
          totalPage = res.data.total
          break
        default:
          res = await getBuildApplyNotice(state.listQuery)
          list = res.body.page.list
          totalPage = res.body.page.pageTotal
          break
      }
      state.dataList = state.dataList.concat(list)
      state.totalPage = totalPage
      state.loading = false
      if (state.dataList.length >= totalPage) state.finished = true
    }

    // 加载列表
    const onLoad = () => {
      if (!state.refreshing && state.dataList.length < state.totalPage) {
        state.listQuery.pageNo = state.listQuery.pageNo + 1
      }
      if (state.refreshing) {
        state.dataList = []
        state.refreshing = false
      }
      getDataList()
    }

    // 刷新列表
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.listQuery.pageNo = 1
      onLoad()
    }

    const goBack = () => {
      router.go(-1)
    }
    
    return {
      ...toRefs(state),
      goBack,
      beforeChange,
      onLoad,
      onRefresh,
      getDataList,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  color: #2e3f6a;
  font-weight: 400;
  .tabs-box {
    margin-top: 10px;
    /deep/ .van-tabs__wrap {
      border-radius: 7px;
      overflow: hidden;
    }
    .content {
      height: calc(~'(100vh - 100px)');
      overflow: hidden;
      overflow-y: scroll;
      .empty {
        display: block;
        width: 150px;
        margin: 50px auto 20px;
      }
    }
  }
}
</style>